<script setup>
import {ref, inject} from "vue";
import {delBgAPI} from "@/api/bg.js";

// 是否显示
const {editorBgVisible, editorBgImg, search} = inject('editorBgVisible')

const delBg = async () => {
  const res = await ElMessageBox.confirm(
      `是否确认删除背景图片`,
      '删除背景图片',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 执行权限删除
    return await delBgAPI(editorBgImg.value.id)
  }).catch(() => {
    return false
  })
  // 成功
  if (res) {
    // 关闭弹窗
    await search()
    editorBgVisible.value = false
  }

}
</script>

<template>
  <div class="add-authority">
    <el-dialog v-model="editorBgVisible" title="编辑背景图片" width="25%">
      <div class="p-2">
        <el-image
            style="width: 240px; height: 240px"
            :src="editorBgImg?.imgUrl"
            fit="cover"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[editorBgImg?.imgUrl]"
            preview-teleported
        />
      </div>
      <div class="mt-8">
        <el-button type="primary" plain @click="delBg">删除背景图片</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>